<template>
    <div class="tabberWarp">
        <div class="warp">
            <router-link v-for="(item,index) in routerList" :to = item.route :key="index">
                <div class="itemWarp flex_mid">
                <span>
                    <img :src="activeIndex === item.index ? item.activeImg : item.normalImg" alt="">
                </span>
                <span >{{item.name}}</span>
                </div>
            </router-link>
        </div>
    </div>
</template>

<script>
    export default {
        name: "tabberWarp",
        props: {
            activeIndex: {
                type: Number,
                required: true
            }
        },
        data() {
            return {
                routerList: [
                    {
                        index: 0,
                        name:'商城',
                        route:'home',
                        normalImg:require('../../../static/img/home.png'),
                        activeImg:require('../../../static/img/home-active.png')
                    },  
                    {
                        index: 1,
                        name:'精选',
                        route:'selected',
                        normalImg:require('../../../static/img/selected.png'),
                        activeImg:require('../../../static/img/selected-active.png')
                    },
                    {
                        index: 2,
                        name:'论坛',
                        route:'forum',
                        normalImg:require('../../../static/img/forum.png'),
                        activeImg:require('../../../static/img/forum-active.png'),
                    },
                    {
                        index: 3,
                        name:'我的',
                        route:'mine',
                        normalImg:require('../../../static/img/my.png'),
                        activeImg:require('../../../static/img/my-active.png'),
                    },




                ]
            }
        }
    }
</script>

<style type="text/css" lang="less">
@import url(../../assets/less/public.less);

.tabberWarp{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-bottom: 5px;
    background: #fff;

     .warp{
        width: 100%;
        border-top: 1px solid #eee;
        background: #fff;
        font-size: 0;
        @flex();
        @justify1();
        .itemWarp{
            @flex();
            @justify2();
            flex-grow: 1;
            flex-direction: column;
            span{
                font-size: 12px;
            }
        }
        img{
            width: 25px;
            height: 25px;
        }
    }

    img{
        margin-top: 10px;
        margin-bottom: 5px;
    }

}

</style>